// --- 修改後的 Bricks & Robotics 區塊節錄 ---

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
  {/* 1. LEGO Ping Pong Launcher - 已移除右下角 PlayCircle */}
  <a href="./steam_pingponglauncher.html" target="_blank" rel="noopener noreferrer" className="bg-gradient-to-br from-emerald-500 to-cyan-800 rounded-[2rem] p-5 text-white cursor-pointer hover:shadow-2xl hover:scale-[1.01] transition-all relative overflow-hidden flex flex-col group shadow-lg min-h-[18rem]">
    <div className="w-full h-36 rounded-xl overflow-hidden mb-4 bg-white/10 flex items-center justify-center">
      <img src="https://i.ibb.co/dsnqrs3k/Ping-Pong-Ball-Machine-Wedo2.png" alt="LEGO Ping Pong Launcher" className="w-full h-full object-contain group-hover:scale-110 transition-transform duration-500" />
    </div>
    <div className="relative z-10 flex-1">
      <h3 className="text-lg font-black mb-1 drop-shadow-md leading-tight">LEGO Ping Pong Launcher</h3>
      <p className="text-emerald-50 text-xs opacity-90 font-bold line-clamp-2">Transforming LEGO SPM mechanics into WeDo 2.0 system.</p>
    </div>
    {/* 這裡原本的 PlayCircle div 已移除 */}
  </a>

  {/* 2. Bow & Arrow - 已移除右下角 Youtube 圖示 */}
  <a href="./steam_bow&arrow.html" target="_blank" rel="noopener noreferrer" className="bg-gradient-to-br from-indigo-500 to-purple-800 rounded-[2rem] p-5 text-white cursor-pointer hover:shadow-2xl hover:scale-[1.01] transition-all relative overflow-hidden flex flex-col group shadow-lg min-h-[18rem]">
    <div className="w-full h-36 rounded-xl overflow-hidden mb-4 bg-white/10 flex items-center justify-center">
      <img src="https://i.ibb.co/p6JXLyd9/45.png" alt="LEGO Bow and Arrow" className="w-full h-full object-contain group-hover:scale-110 transition-transform duration-500" />
    </div>
    <div className="relative z-10 flex-1">
      <h3 className="text-lg font-black mb-1 drop-shadow-md leading-tight">LEGO 9686 SPM: Bow & Arrow</h3>
      <p className="text-indigo-50 text-xs opacity-90 font-bold line-clamp-2">Mastering mechanical logic through high-precision LEGO construction.</p>
    </div>
    {/* 這裡原本的 Youtube div 已移除 */}
  </a>

  {/* 3. 動態生成的 stemL1Projects (含 Rubber Band Car) - 已移除右下角 PlayCircle */}
  {stemL1Projects.map((project, index) => {
      const themes = ["from-slate-600 to-gray-900", "from-blue-600 to-indigo-900", "from-teal-600 to-emerald-900", "from-violet-600 to-purple-900"];
      const themeClass = themes[index % 4];
      const link = project.customLink || `./stem_l1_u1_${project.id}.html`;
      
      return (
          <a key={project.id} href={link} target="_blank" rel="noopener noreferrer" className={`bg-gradient-to-br ${themeClass} rounded-[2rem] p-5 text-white cursor-pointer hover:shadow-2xl hover:scale-[1.01] transition-all relative overflow-hidden flex flex-col group shadow-lg min-h-[18rem]`}>
            <div className="w-full h-36 rounded-xl overflow-hidden mb-4 bg-white/10 flex items-center justify-center relative">
              {project.cover ? (
                  <img src={project.cover} className="w-full h-full object-contain group-hover:scale-110 transition-transform duration-500" alt={project.title} />
              ) : (
                  <span className="text-[6rem] drop-shadow-2xl group-hover:scale-110 transition-transform duration-500">⚙️</span>
              )}
            </div>
            <div className="relative z-10 flex-1">
              <h3 className="text-lg font-black mb-1 drop-shadow-md leading-tight">{project.title}</h3>
              <p className="text-white/80 text-xs font-bold line-clamp-1">Mechanical structure & logic</p>
              <div className="mt-3 flex items-center text-[10px] font-black uppercase tracking-widest bg-white/20 w-fit px-2 py-1 rounded-md backdrop-blur-sm"><span>MECHANICS</span></div>
            </div>
            {/* 這裡原本的 PlayCircle div 已移除 */}
          </a>
      );
  })}
</div>